<template>
  <div class="method-info">
    <el-form v-model="methodInfo" label-width="80px" label-position="right">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="调用指令" required>
            <el-input v-model="methodInfo.callCmd" :disabled="!$Util.isEmpty(methodInfo.methodId)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="函数名称" required>
            <el-input v-model="methodInfo.methodName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="函数介绍">
            <el-input v-model="methodInfo.methodNote"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="0" style="text-align: center">
        <el-button-group style="z-index: 99">
          <el-button v-if="methodInfo.appId === appInfo.appId"  type="primary" :loading="loading" icon="el-icon-check" @click="saveMethod">{{ methodInfo.methodId ? '更新' : '保存' }}函数</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-tabs>
      <el-tab-pane label="函数体">
        <idea-code v-model="methodInfo.methodBody" :config="{ language: methodInfo.methodGrammar || 'java' }" style="height: calc(100vh - 340px)"></idea-code>
      </el-tab-pane>
      <el-tab-pane v-if="methodInfo.callCmd" label="测试用列" lazy>
        <method-case-info ref="caseRef"  @save="$emit('save')"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import IdeaCode from "@/components/idea-code/IdeaCode";
import MethodCaseInfo from "@/views/system/method/MethodCaseInfo";
export default {
  name: "MethodInfo",
  components: {MethodCaseInfo, IdeaCode},
  provide(){
    return {
      methodInfo: this.methodInfo
    }
  },
  inject: {
    $LabWeb: {
      from: '$LabWeb',
      default: function () {
        return undefined
      }
    },
    appInfo: {
      from: 'appInfo',
      default: function () {
        return { appId: '0' }
      }
    }
  },
  props: {
    methodId: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      loading: false,
      methodInfo: { }
    }
  },
  mounted() {
    this.loadMethod()
  },
  methods: {
    loadMethod() {
      if (!this.methodId) {
        return
      }
      this.$get('method/get/' + this.methodId)
          .then(res => {
            this.$Util.copyAttr(res.data, this.methodInfo, null, this)
          })
    },
    testMethod() {
      this.$refs.caseRef.testMethod()
    },
    saveMethod() {
      this.$refs.caseRef.saveMethod()
    }
  }
}
</script>

<style lang="scss">
  .method-info {
    .el-form-item--mini {
      margin-bottom: 8px!important;
    }
  }
</style>
